<template>
	<view>
		<u-loading-page :loading="uploading" loading-text="图片上传中..."></u-loading-page>
		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="maxCount" :previewFullImage="true"></u-upload>
	</view>

</template>

<script>
	import uuidApi from "@/utils/uuid.js";
	import {
		picUrlConstruct
	} from "@/utils/picUrlConstruct.js";

	export default {
		name: "ImageUpload",
		props: {
			value: [String, Object, Array],
			// 图片最大上传数量
			maxCount: {
				type: String,
				default: "1"
			}
		},
		data() {
			return {
				fileList1: [],
				// 图片数量
				pictureNum: 0,
				// 是否显示加载中
				uploading: false,
			};
		},
		created() {
			// console.log("this.value:" + JSON.stringify(this.value))
			if (this.value != null) {
				this.fileList1 = [];
				for (var i = 0; i < this.value.length; i++) {
					if (this.value[i] != '') {
						this.fileList1.push({
							url: picUrlConstruct(this.value[i]),
							fileName: this.value[i],
						});
					}
				}
			}
			this.pictureNum = this.fileList1.length;
			console.log("this.fileList1:" + JSON.stringify(this.fileList1))
		},
		watch: {
			// 监听数据变化
			value: {
				handler(newValue, oldValue) {
					this.fileList1 = [];
					for (var i = 0; i < newValue.length; i++) {
						if (newValue[i] != '') {
							this.fileList1.push({
								url: picUrlConstruct(newValue[i]),
								fileName: this.value[i],
							});
						}
					}
					this.pictureNum = this.fileList1.length;
				},
				immediate: true,
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				let deletIndex = event.index;
				this.fileList1.splice(deletIndex, 1);
				let urlList = [];
				for (var i = 0; i < this.fileList1.length; i++) {
					urlList.push(this.fileList1[i].fileName);
				}
				this.pictureNum--;
				console.log("删除图片，urlList:" + JSON.stringify(urlList));
				this.$emit("input", urlList);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.fileList1.length;
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				// 将新选中的图片上传到后端
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					fileListLen++;
				}
				// 将数据提交给父组件
				let urlList = [];
				for (var i = 0; i < this.fileList1.length; i++) {
					urlList.push(this.fileList1[i].fileName);
				}
				console.log("新增图片，urlList:" + JSON.stringify(urlList));
				this.$emit("input", urlList);
			},
			// 上传图片
			uploadFilePromise(file) {
				console.log("file：" + JSON.stringify(file));
				this.uploading = true;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://' + this.Constant.domainUrl + "/admin/picture/upload",
						name: 'file',
						filePath: file,
						formData: {},
						header: {
							'Token': uni.getStorageSync('token'),
						},
						success: (res) => {
							let resultData = JSON.parse(res.data).data;
							// console.log("resultData:" + JSON.stringify(resultData.data));
							let picUrl = resultData.url;
							console.log("picUrl:" + picUrl);
							console.log("this.fileList1:" + JSON.stringify(this.fileList1));
							console.log("this.pictureNum：" + this.pictureNum);
							console.log("this.fileList1.length：" + this.fileList1.length);
							console.log("当前图片索引：" + (this.fileList1.length - (this.fileList1.length -
								this.pictureNum)));
							// 设置之后，才可以预览图片
							let fileIndex = this.fileList1.length - (this.fileList1.length - this
								.pictureNum);
							this.fileList1[fileIndex].url = picUrl;
							this.fileList1[fileIndex].fileName = resultData.fileName;
							// 修改文件的状态为已经上传完成
							this.fileList1[fileIndex].status = 'success';
							this.fileList1[fileIndex].message = '';
							// 上传完成的文件多一个
							this.pictureNum++;
							this.uploading = false;
							resolve(res);
						},
						fail: (e) => {
							console.log(e);
						}
					});
				}).catch(err => {
					console.log("图片上传失败：" + JSON.stringify(err));
				})
			},
		}
	}
</script>

<style>

</style>